<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css//swiper.min3.css"/>
  <link rel="stylesheet" href="css/swiper-bundle.minsix.css">
  <link rel="stylesheet" href="css/certify.css">

  <title>家装定制</title>
  <style>
    a{text-decoration: none; color: #000; display: block;}
    img{display: block; width: 100%; display: block;}
    *{margin: 0; padding: 0;}
    /* Swiper */
    #banner{height: 750px;}

    .banner{
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .swiper {
        width: 100%;
        height: 700px;
      }
      .swiper-slide {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .swiper-pagination{color: #68B541;}
    /* 导航 */
    #banner{position: relative; height: 700px;}
    #head{width: 90%; margin: 0 auto; height: 100px; position: absolute; top: 0; z-index: 1;}
    #rightbanner{float: left; margin-left: 10%; color: #76BD51;}
    #rightbanner img{width: 60px; height: 60px; float: left; margin: 10px 0;}
    #rightbanner p{line-height: 80px; float: left; margin-left: 20px;}
    nav{float: right; width: 60%; line-height: 40px; margin: 20px 0;}
    nav a{width: 10%; text-align: center; color: #fff; display: inline-block;}
    nav a:hover,nav a:nth-child(6){color: #68B541;}
    /* 尾部 */
        #footer{background-color: #2B2B2B; color: #fff;}
    .footer{text-align: center; line-height: 4rem; height: 4rem;}
    #foot{background-color: #373737; height: 300px; width: 100%;}
    .foot{width: 70%; margin: 0 auto;}
    .footleft{width: 15%; padding: 30px 0; float: left;}
    .footleft a{display: block; color: #fff; line-height: 2rem;}
    .footleft a:first-child{font-size: 1.2rem; line-height: 3rem;}
    .footleft img{width: 130px; padding: 30px 0;}
    .footleft p{color: #fff;}
    .footright{padding: 60px 0;}
    .footright p{color: #fff;}
    .footright p:nth-child(2){font-size: 2rem; line-height: 5rem;}
    /* banner中间内容 */
    #banner-middle{height: 300px;width: 100%; position: relative; top: -500px; z-index: 1;}
    form{margin-left: 15%; position: absolute;}
    #su{position: relative; top: -3rem; right: -300%; background: url(./img/sousuo.png) 5px 5px no-repeat; background-size: 30px; background-color: #6AB743; border: none; border-radius: 0 10px 10px 0; width: 48px; height: 47px; display: block;}
    .banner-middle{width: 70%; margin-left: 15%; color: #FFF; text-align: center; font-size: 2.5rem;}
    .banner-middle p:nth-child(1){font-size: 1rem;}
    .banner-middle p:nth-child(2){line-height: 6rem;}
    .sousuo{width: 300%; background-color: rgba(255, 255, 255, 0.4);  border-radius: 10px 0 0 10px; border: none; outline: none; color: #FFF; padding: 1rem 0.5rem;}
    /* middle第一个 */
    #middleOne{width: 90%; height: 600px; margin: 50px 0; margin-left: 10%;}
    .middleone-left{padding-left: 8%; width: 45%; box-shadow: 1px 1px 5px 3px rgb(209, 204, 204); height: 500px; float: left; background: url(./img/src=http___img.zcool.cn_community_0173e455411801000001e71bdee994.jpg&refer=http___img.zcool.webp) no-repeat; background-size: 100% 500px;}
    .middleone-left img{width: 60px; height: 60px; margin: 80px 0 30px 0%;}
    .middleone-left p{width: 70%; color: #A5A5A5; line-height: 2rem; margin-top: 20px;}
    .middleone-right{width: 50%; box-shadow: 1px 1px 5px 3px rgb(213, 210, 210); height: 500px; position: relative; top: 50px; left: 40%;}
    .middleone-right img{position: relative; top: -500px; width: 100%; height: 125px; border-radius: 5px;}
    .middleone-right-tucheng{width: 50%; height: 500px; position: relative; top: 50px; left: 40%;}
    .middleone-right-tucheng-word{text-align: center; background-color: rgba(255, 255, 255, 0.6); position: relative; top: -500px; width: 100%; height: 125px; border-radius: 5px;}
    .middleone-right-tucheng-word:hover{visibility: hidden;}
    .middleone-right-tucheng-word-one{font-size: 1.3rem; color: #333333; padding-top: 10px; line-height: 3rem;}
    .middleone-right-tucheng-word-two{background-color: #000; width: 10%; margin-left: 45%; height: 3px;}
    .middleone-right-tucheng-word-three{color:#666; line-height: 3rem;}
    /* middle第二个 */
    #middleTwo{height: 500px; background: url(./img/1629440773984.jpg) 120px; line-height: 1.5rem; background-size: cover; text-align: center; color: #FFF;}
    #middleTwo p:nth-child(1){font-size: 1.5rem; padding: 100px 0 20px 0;}
    #middleTwo p:nth-child(2){font-size: 1.3rem; padding-bottom: 40px;}
    /* middle第三个 */
    #middleThree{height: 1000px; margin: 50px 0; background: url(./img/dalishi.png); color: #000; background-color: rgba(255, 255, 255, 0.6); text-align: center;}
    .middleThree-one{font-size: 1.5rem;}
    .middleThree-one p:nth-child(1){color: #CCCCCC; font-size: 1rem; padding-bottom: 5px; }
    .middleThree-two{margin: 50px 0; color: #9F9F9F; font-size: 1rem; line-height: 1.5rem;}
    .middleThree-three{width: 70%; margin-left: 15%; height: 200px;}
    .middleThree-threes{box-shadow: 1px 1px 5px 3px rgb(213, 210, 210); width: 15%;margin-right: 5%; float: left; height: 150px; background-color: #fff;}
    .middleThree-threes:last-child{margin-right: 0;}
    .middleThree-threes img{width: 80px; height: 80px; margin-left: 40px; padding: 15px 0;}
    .middleThree-threes p{color:#BBBBBB; font-size: 0.8rem; text-align: center;}
    /* 轮播图 */
    .lunbotu{position: absolute; top: -600px;}
    /* 门店信息 */
    #mendian{margin-top: -450px;}
    .mendian{text-align: center; margin-bottom: 100px;}
    .mendian{font-size: 1.5rem;}
    .mendian p:nth-child(1){color: #CCCCCC; font-size: 1rem; padding-bottom: 5px; }
    .mendian-xia{width: 75%; margin-left: 12.5%; height: 400px;}
    .mendian-xia-left{float: left; width: 45%;}
    .mendian-xia-right{float: right; width: 50%;}
    .mendian-xia-right img{float: right; width: 100%; height: 400px;}
    .mendian-xia-left-one{height: 95px; border-right: 1px #F3F3F3 solid; border-bottom: 1px #F3F3F3 solid;}
    .mendian-xia-left img{width: 20px; height: 30px; float: left;}
    .mendian-xia-left-one-img{width: 7%; height: 94px; float: left; margin-top: 5px;}
    .mendian-xia-left-one-p{color:#ADADAD; line-height: 1.6rem; display: block;}
    .mendian-xia-left-one-p p:nth-child(1){color:#6B6B6B; line-height: 2.4rem; display: block;}
    /* 最后一部分 */
    #zuihou{margin: 50px 0 0 0 ; background: url(./img/1629439297577.jpg); height: 600px; background-size: cover; background-color: rgba(226, 43, 43, 0.4);}
    .zuihou{width: 80%; margin-left: 10%; padding: 50px 0;}
    .zuihou-left{text-align: center; float: left; width: 50%; padding: 50px 5%; box-sizing: border-box; height: 500px; border: 5px #CAA97E solid;}
    .zuihou-right{float: right; width: 45%; padding: 20px 10px; height: 500px;}
    .zuihou-left p:nth-child(1){color: #464646; font-size: 1.5rem;}
    .zuihou-left div{width: 15%; height: 2px; background-color: #464646; margin: 20px auto;}
    .zuihou-left p:nth-child(4),.zuihou-left p:nth-child(3){color: #6c6a6a; line-height: 1.7rem;}
    .zuihou-left .input-one{padding: 0 10px; border: 1px #000 solid; width: 80%; outline: none; display: block; line-height: 2.5rem; margin: 20px 10%;}
    .zuihou-left p:nth-child(4){margin-bottom: 50px;}
    .submit{width: 50%; border: none; color: #fff; background-color: #CAA97E; line-height: 2.5rem; margin-top: 50px; margin-left: 25%; height: 2.5rem; display: block;}
    h1{color: #333333; font-size: 3rem; font-weight: 100; border-bottom: 2px #CBAF86 solid; width: 200px; padding-bottom: 30px;}
    .zuihou-right-one{margin: 30px 0; height: 150px;}
    .zuihou-right-one-left{width: 45%; margin-left: 0%; color: #6C6A6A; font-size: 0.9rem; box-sizing: border-box; float: left;}
    .zuihou-right-one-left p:nth-child(1){color: #000; font-size: 1rem; line-height: 2rem;}
    .zuihou-right-one-right{width: 50%; float: right; height: 130px;}
    .zuihou-right-one-right img{width: 100%; float: right; height: 130px;}
    .zuihou-right-one-lefts{float: right; width: 45%; margin-left: 5%;}
    .zuihou-right-one-rights{width: 50%;}
    .hao{height: 60px; margin: 10px 0; }
    .haoone{float: left; height: 60px; line-height: 60px; display: block; color: #343134; font-size: 1.2rem;}
      .wei{float: right; border-left: 1px #000 solid; height: 55px; padding: 15px 0 0 20px;}
      .weione{color: #68B541; font-size: 1.1rem;}
  </style>
</head>
<body>
  <!-- Swiper -->
  <div id="banner">
    <div class="banner">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/1629368651386.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/1629367677352.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/1629369967305.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/1629367677352.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/1629368651386.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="./img/1629369967305.jpg" alt="">
          </div>
        </div>
      <div class="swiper-pagination"></div>
      </div> 
    </div>
    <!-- 导航  -->
    <div id="head">
      <div id="rightbanner">
        <img src="./img/jia.png" alt="">
        <p>绿色小屋</p>
      </div>
      <nav>
        <a href="./index.html">首页</a>
        <a href="./Two.html">精品示范</a>
        <a href="./Three.html">装修风格</a>
        <a href="./Four.html">产品展示</a>
        <a href="./Five.html">家装定制</a>
        <a href="./Six.html">关于我们</a>            
      </nav>
    </div>
    <!-- banner中间内容 -->
    <div id="banner-middle">
      <div class="banner-middle">
        <p>LOOK FOR YQUR OWN ENVIRONMENT SPACE, REVEAL PERSONALITY DESIGN</p>
        <p>寻找符合自身的环境空间，彰显个性设计</p>
        <form action="#">
          <input class="sousuo" type="text" value="关于我们">
          <input id="su" type="submit" value="" >
        </form>
      </div>
    </div>
  </div>
  <!-- middle第一个 -->
  <div id="middleOne">
    <div class="middleone-left">
      <img src="./img/jia.png" alt="">
      <h2>关于我们</h2>
      <p>绿色小屋隶属于上海绿色小屋装修有限公司，是国内深受客户欢迎的家居装修网站，以“绿色，环保”为口号，以绿色环保元素为核心，衍生出房屋装修装饰设计模板、艺术家具、原创设计、新中式、美式简约等细分设计素材。网站装修设计原创，快速联系，关于我们</p>
    </div>
    <div class="middleone-right">
      <img src="./img/xianshi.png" alt="">
      <img src="./img/xianshi.png" alt="">
      <img src="./img/xianshi.png" alt="">
      <img src="./img/xianshi.png" alt="">
    </div>
    <div class="middleone-right-tucheng">
      <div class="middleone-right-tucheng-word">
        <p  class="middleone-right-tucheng-word-one">新中式</p>
        <div class="middleone-right-tucheng-word-two"></div>
        <p class="middleone-right-tucheng-word-three">NEW CHINESE STYLE</p>
      </div>
      <div class="middleone-right-tucheng-word">
        <p  class="middleone-right-tucheng-word-one">美式简约</p>
        <div class="middleone-right-tucheng-word-two"></div>
        <p class="middleone-right-tucheng-word-three">AMERICAN CONTRACTED</p>
      </div>
      <div class="middleone-right-tucheng-word">
        <p  class="middleone-right-tucheng-word-one">新中式</p>
        <div class="middleone-right-tucheng-word-two"></div>
        <p class="middleone-right-tucheng-word-three">NEW CHINESE STYLE</p>
      </div>
      <div class="middleone-right-tucheng-word">
        <p  class="middleone-right-tucheng-word-one">业北欧简约</p>
        <div class="middleone-right-tucheng-word-two"></div>
        <p class="middleone-right-tucheng-word-three">NORDIC CONTRACTED</p>
      </div>
    </div>
  </div>
  <!-- middle第二个 -->
  <div id="middleTwo">
    <p>WHOLE HOUSE CUSTOMIZATIO N</p>
    <p>全屋定制</p>
    <p>绿色小星卡属于上海绿西小星扶修有限公司，是国内深受客户改迎的家居转修网站，</p>
    <p>日“谨色。开保为口号，以绿色环保元素为核心，初生出房屋装修装体设计模板。</p>
    <p>艺术家具，原创设计、新中式，美式商的等团外设计素材。网站抽传设计草创</p>
    <p>快注联系，关于我门</p>
  </div>
  <!-- middle第三个 -->
  <div id="middleThree">
    <div class="middleThree-one">
      <p>SERVICE CONTENT</p>
      <p>服务内容</p>
    </div>
    <div class="middleThree-two">
      <p>绿色小屋隶属于上海绿色小屋装修有限公司</p>
      <p>是国内深受用户欢迎的家居装修网站，以“绿色和环保”为口号</p>
    </div>
    <div class="middleThree-three">
      <div class="middleThree-threes">
        <img src="./img/sixone.png" alt="">
        <p>来店体验1:1实景样板房</p>
      </div>
      <div class="middleThree-threes">
        <img src="./img/sixtwo.png" alt="">
        <p>一户一方案空间优化设计</p>
      </div>
      <div class="middleThree-threes">
        <img src="./img/sixthree.png" alt="">
        <p>九大空间个性定制</p>
      </div>
      <div class="middleThree-threes">
        <img src="./img/sixfive.png" alt="">
        <p>进场施工及安装家具</p>
      </div>
      <div class="middleThree-threes">
        <img src="./img/sixfive.png" alt="">
        <p>一站式售后服务</p>
      </div>
    </div>
  </div>
  <!-- 轮播图 -->
    <div id="certify" class="lunbotu">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./img/certify01.png" /><p>非常难得又值钱的认证证书</p></div>
          <div class="swiper-slide"><img src="./img/certify02.png" /><p>深圳市优秀互联网企业认定证书</p></div>
          <div class="swiper-slide"><img src="./img/certify03.png" /><p>质量管理体系认证荣誉证书</p></div>
          <div class="swiper-slide"><img src="./img/certify04.png" /><p>计算机软件著作权登记证书</p></div>
          <div class="swiper-slide"><img src="./img/certify05.png" /><p>增值电信业务经营许可证</p></div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  <!-- 门店信息 -->
  <div id="mendian">
    <div class="mendian">
      <p>STRE INFORMATION</p>
      <p>门店信息</p>
    </div>
    <div class="mendian-xia">
      <div class="mendian-xia-left">
        <div class="mendian-xia-left-one">
          <div class="mendian-xia-left-one-img">
            <img src="./img/mapone.png" alt="">
          </div>
          <div class="mendian-xia-left-one-p">
            <p>绿色小屋店</p>
            <p>地址: XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            <p>电话: 400-8889999</p>            
          </div>
        </div>
        <div class="mendian-xia-left-one">
          <div class="mendian-xia-left-one-img">
            <img src="./img/mapone.png" alt="">
          </div>
          <div class="mendian-xia-left-one-p">
            <p>绿色小屋店</p>
            <p>地址: XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            <p>电话: 400-8889999</p>            
          </div>
        </div>
        <div class="mendian-xia-left-one">
          <div class="mendian-xia-left-one-img">
            <img src="./img/mapone.png" alt="">
          </div>
          <div class="mendian-xia-left-one-p">
            <p>绿色小屋店</p>
            <p>地址: XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            <p>电话: 400-8889999</p>            
          </div>
        </div>
        <div class="mendian-xia-left-one">
          <div class="mendian-xia-left-one-img">
            <img src="./img/mapone.png" alt="">
          </div>
          <div class="mendian-xia-left-one-p">
            <p>绿色小屋店</p>
            <p>地址: XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            <p>电话: 400-8889999</p>            
          </div>
        </div>
      </div>
      <div class="mendian-xia-right">
        <img src="./img/map.png" alt="">
      </div>
    </div>
  </div>
  <div id="zuihou">
    <div class="zuihou">
      <div class="zuihou-left">
        <p>关于我们</p>
        <div></div>
        <p>将定制温馨家具气息融入到每一个幸福的家庭!让“简约、时尚、</p>
        <p>现代”成为了定邻家居风格的关键词。</p>
        <input class="input-one" type="text" placeholder="请输入名字">
        <input class="input-one" type="text" placeholder="请输入你的手机号">
        <input class="submit" type="submit">
      </div>
      <div class="zuihou-right">
        <h1>最新资讯</h1>
        <div class="zuihou-right-one">
          <div class="zuihou-right-one-left">
            <p>本着为客户努力打造唯美...</p>
            <p>按照全套设计方案，在逐一为各区...</p>
            <div class="hao">
              <div class="haoone">MORE>></div>
              <div class="wei">
                <div class="weione">08-12</div>
                <div class="weione">2022</div>
              </div>
            </div>
          </div>
          <div class="zuihou-right-one-right">
            <img src="./img/zuihou.png" alt="">
          </div>
        </div>
        <div class="zuihou-right-one">
          <div class="zuihou-right-one-left zuihou-right-one-lefts">
            <p>本着为客户努力打造唯美...</p>
            <p>按照全套设计方案，在逐一为各区...</p>
            <div class="hao">
              <div class="haoone">MORE>></div>
              <div class="wei">
                <div class="weione">08-12</div>
                <div class="weione">2022</div>
              </div>
            </div>
          </div>
          <div class="zuihou-right-one-right zuihou-right-one-rights">
            <img src="./img/zuihou.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>







    <!-- 尾部 -->
    <div id="foot">
      <div class="foot">
        <ul class="footleft">
          <a href="#">关于我们</a>
          <a href="#">企业介绍</a>
          <a href="#">联系我们</a>
          <a href="#">企业招聘</a>
        </ul>
        <ul class="footleft">
          <a href="#">案例展示</a>
          <a href="#">工地鉴赏</a>
          <a href="#">装修实景</a>
          <a href="#">精品案例</a>
        </ul>
        <ul class="footleft">
          <a href="#">装修服务</a>
          <a href="#">新房装修</a>
          <a href="#">老房改造</a>
          <a href="#">别墅大宅</a>
                  <a href="#">皇冠工程</a>
                </ul>
                <div class="footleft">
                  <img src="./img/erweima.png" alt="">
                  <p>免费领取户型规划</p>
                </div>
                <div class="footright">
                  <p>全国服务热线:</p>
                  <p>400- 888-8888</p>
                  <p>地址:中国(. 上海)自由贸易试验区碧波路690号1幢402- 1室</p> 
                </div>
              </div>
            </div>
            <div id="footer">
              <div class="footer">绿色小屋装饰有限公司版权所有C2021 (沪)xxx证xXXxx号 使用前必读</div>
            </div>



    <!-- Swiper JS -->
    <script src="./js/swiper.min3.js"></script>
  <script src="js/swiper-bundle.minsix.js"></script>
    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        loop : true,
        spaceBetween: 300,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: {
    delay: 2500,  // 多长时间进行一次自动切换
    disableOnInteraction: false,  // 用户点击一次后是否取消自动切换 默认true
  },
  speed: 600, // 切换速度
      });
      // 轮播图
      certifySwiper = new Swiper('#certify .swiper-container', {
	watchSlidesProgress: true,
	slidesPerView: 'auto',
	centeredSlides: true,
	loop: true,
	loopedSlides: 5,
	autoplay: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		//clickable :true,
	},
	on: {
		progress: function(progress) {
			for (i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i);
				var slideProgress = this.slides[i].progress;
				modify = 1;
				if (Math.abs(slideProgress) > 1) {
					modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
				}
				translate = slideProgress * modify * 260 + 'px';
				scale = 1 - Math.abs(slideProgress) / 5;
				zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
				slide.transform('translateX(' + translate + ') scale(' + scale + ')');
				slide.css('zIndex', zIndex);
				slide.css('opacity', 1);
				if (Math.abs(slideProgress) > 3) {
					slide.css('opacity', 0);
				}
			}
		},
		setTransition: function(swiper, transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}

		}
	}

})
    </script>

</body>
</html>